<template>
  <div>
    <h2>父亲的钱:{{ fatherMoney }}</h2>
    <button @click="getMoneyFromSon(100)">找儿子借钱100</button><br />
    <button @click="getMoneyfromDaughter(150)">找女儿借钱150</button><br />
    <button @click="getChildren(200)">找所有孩子借钱200</button><br />
    <br />
    <son />
    <br />
    <daughter />
    <br />
  </div>
</template>

<script>
import Son from "./Son.vue";
import Daughter from "./Daughter.vue";
export default {
  name: "Father",
  data() {
    return {
      fatherMoney: 1000,
    };
  },
  components: { Son, Daughter },
  methods: {
    getMoneyFromSon(money) {
      this.fatherMoney += money;
      this.$children[0].sonMoney -= money;
    },
    getMoneyfromDaughter(money) {
      this.fatherMoney += money;
      this.$children[1].daughterMoney -= money;
    },
    getChildren(money) {
      this.fatherMoney += money * 2;
      // 不建议这样写，因为组件的顺序是不确定的
      this.$children[0].sonMoney -= money;
      this.$children[1].daughterMoney -= money;
    },
  },
};
</script>

<style>
</style>